<template>
    <div>
        <div class="right-wrapper content-lianxi-tiaomu page-quicktest">
            <div class="page-titles">
                <div class="row">
                    <div class="col-md-4">
                        <h3 class="text-themecolor">
                            <div class="header-crumb">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                    <el-breadcrumb-item :to="{ path: '/mydash' }">练习与模考</el-breadcrumb-item>
                                    <el-breadcrumb-item>智能练习</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="quickTest-toolbar">
                <ul class="nav ul-date-first">
                    <li>
                        <div class="nav-date">
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <span>{{time_cost}}</span>
                        </div>
                    </li>
                </ul>

               <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)">
                            <button type="button" class="btn btn-outline-danger btn-block" v-if="timeout" @click="pause()"><i class="fa fa-pause"></i>暂停</button>
                            <button type="button" class="btn btn-outline-success btn-block" v-if="!timeout" @click="restart()"><i class="fa fa-play">重启</i></button>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)">
                            <button type="button" class="btn btn-outline-danger btn-block" @click="showDt()"><i class="fa fa-list-ol"></i>答题卡</button>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" @click="submit()">
                            <button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-check-square-o" aria-hidden="true"></i>交卷</button>
                        </a>
                    </li>
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" href="#">-->
                    <!--<button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-heart"></i>留到下次</button>-->
                    <!--</a>-->
                    <!--</li>-->
                </ul>
            </div>
            <div class="container-fluid">
                <div class="row" v-loading="loading">
                    <div class="col-md-12" v-for="(item,ik) in list" :id="'item_'+ik">
                        <div class="card">
                            <div class="card-body">
                                <span class="tiaomu-title pull-left">{{ik+1}}. &nbsp;【单选】&nbsp;</span>
                                <p v-html="item.body"></p>
                                <div class="question-options question-options-8062">
                                    <div class="options-item" :class="{'options-active':aclass[answer.Id],'':!aclass[answer.Id]}" v-for="(answer,ak) in item.answer_data" @click="doAnswer(item,answer,ik)">
                                        <span class="options-no"> {{String.fromCharCode(ak + 1 + 64)}}</span>
                                        <span class="options-p" v-html="answer.Body"> </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="popup-quickTest" v-show="dtshow">
            <div class="row" id="answer-card">
                <span :class="{'ac-question':true,'active':item.is_answered == 1 , 'num-split' : !((ik+1)%5)}" v-for="(item,ik) in list" @click="scrollTo(ik)">{{ik+1}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    import http from "../../lib/http"
    import jquery from "../../lib/jquery"
    export default {
        data : function(){
            var params = this.$route.path.split("-")
            this.simu_id = params[1]
            return {
                clock : true,
                rows : [],
                aclass : {},
                lib : {},
                time_cost : '',
                last_stop_time : 0,
                upFunc : function(){
                },
                timeout : false,
                loop : false,
                dtshow:false,
                submited : false,
                loading : true
            }
        },
        computed : {
            list : function () {
                this.aclass = []
                for(var i=0,j=this.rows.length;i<j;i++){
                    var data = this.rows[i]
                    if(typeof data.answer_data == "string" && data.answer_data != "") {
                        data.answer_data = JSON.parse(data.answer_data)
                    }
                    if(data.answer_choose_data != ""){
                        if(typeof data.answer_choose_data == "string") {
                            data.answer_choose_data = JSON.parse(data.answer_choose_data)
                        }
                        //this.aclass = JSON.parse(JSON.stringify(data.))
                        console.log(data.answer_choose_data)
                        for(var k in data.answer_choose_data){
                            //alert(k)
                            this.aclass[k] = data.answer_choose_data[k]
                        }

                    }

                }
                console.log(this.aclass)
                return this.rows
            }
        },
        beforeRouteLeave(to, from, next){
            var self = this
            if(!this.submited) {
                var r = confirm("您仍未提交试卷,确认离开吗?")
                if (!r) {
                    next(false)
                }
                else next()
            }
            else{
                next()
            }
            //alert(to.path)
            //alert(self)
//            this.$confirm("您仍未提交试卷,确认离开吗").then(function(){
//                self.pause()
//                next()
//            }).catch(function(){
//               // self.$router.push({path:from.path})
//            })
            //next(false)
        },
        created : function(){
            var self = this
            http.alive(this,function(){
                http.get(self,"cs_test_libraries/simu/"+self.simu_id).then(function (res) {
                    self.lib = res.data.data
                    self.last_stop_time = res.data.data.last_stop_time * 1
                    self.time_cost = self.formatSeconds(self.last_stop_time)
                    self.loop = setInterval(function(){
                        self.last_stop_time += 1
                        self.time_cost = self.formatSeconds(self.last_stop_time)
                    },1000)
                    self.upFunc = function(){
                        http.put(self,"cs_test_libraries/simu/"+self.simu_id,{"last_stop_time" : self.last_stop_time}).then(function(res){
                            //console.log(res)
                        })
                        self.timeout = setTimeout(function(){
                            self.upFunc()
                        },3000)
                    }
                    self.timeout = setTimeout(self.upFunc,3000)
                })
                http.get(self,"cs_test_libraries_item/simu/"+self.simu_id).then(function (res) {
                    self.loading = false
                    self.rows = res.data.data
                })
            })

        },
        methods : {
            formatSeconds : function(value) {
                var theTime = parseInt(value);// 秒
                var theTime1 = 0;// 分
                var theTime2 = 0;// 小时
                if(theTime > 60) {
                    theTime1 = parseInt(theTime/60);
                    theTime = parseInt(theTime%60);
                    if(theTime1 > 60) {
                        theTime2 = parseInt(theTime1/60);
                        theTime1 = parseInt(theTime1%60);
                    }
                }
                var result = []
                //if(theTime2 > 0) {
                var hour = parseInt(theTime2)
                result[result.length] = (hour < 10) ? ("0" + hour) : hour
                //}
                //if(theTime1 > 0) {
                var minute = parseInt(theTime1)
                result[result.length] = (minute < 10) ? ("0" + minute) : minute
                // }
                var second = parseInt(theTime)
                result[result.length] = (second < 10) ? ("0" + second) : second
                return result.join("'");
            },
            scrollTo : function(i){
                var $ = jQuery;
                var toEl = $("#item_"+i)
                var pos = toEl.offset()
                $(document.documentElement).animate({
                    scrollTop: pos.top - 140
                },800)
                $(document.body).animate({
                    scrollTop: pos.top - 140
                },800)
            },
            pause : function(){
                clearTimeout(this.timeout)
                this.timeout = null
                this.timeout = false
                clearInterval(this.loop)
                this.loop = null
                this.loop = false
            },
            restart : function(){
                var self = this
                this.upFunc()
                this.loop = setInterval(function(){
                    self.last_stop_time += 1
                    self.time_cost = self.formatSeconds(self.last_stop_time)
                },1000)
            },
            showDt : function(){
                this.dtshow = !this.dtshow
            },
            doAnswer : function(item,answer,k){
                var self = this
                http.post(this,"cs_test_libraries_item/simu/"+item.id,{"idstr":answer.Id}).then(function (res) {
                    //alert(answer.Id)
                    // if(!self.list[k].answer_choose_data.hasOwnProperty(answer.Id)){
                    self.list[k].answer_choose_data = '{"'+answer.Id+'":true}'
                    self.list[k].is_answered = 1
                    // }
                    self.$set(self.aclass,answer.Id,true)
                    if (self.timeout === false){
                        self.restart()
                    }
                    //console.log(JSON.stringify(self.aclass))
                    //self.aclass[answer.Id] = true
                    //alert(JSON.stringify(self.list[k].answer_choose_data))
                })
                self.scrollTo(k+1)
            },
            submit : function(){
                var self = this
                this.$confirm("确定提交试卷吗?").then(function(){
                    http.post(self,"/cs_test_libraries/"+self.lib.id+"/submit").then(function (res) {
                        //if(res.data.code == )
                        if(res.data.code == "ok"){
                            self.submited = true
                            //location.href = '#/quicktestreport-'+self.lib.id
                            location.href = '#/Lianxibaogao-'+self.lib.id
                        }
                        else{
                            self.$notify.error({
                                title : "提示",
                                message : res.data.msg
                            })
                        }
                    })
                })

            }
        }
    }
</script>
<style scoped>
.num-split{
    margin-right: 20px
}
</style>
